<template>
  <div class="home">
    <input type="text" v-model="title" />
    <button @click="add">添加</button>

    <hr />
    正在进行：
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        v-show="item.status == false"
      >
        <!-- v-for可以和v-show搭配使用 代表 在循环所有数据的时候 让满足条件的显示 不满足的隐藏 -->
        <!-- 不能换成v-if 因为和v-for排斥 -->
        <input type="checkbox" v-model="item.status" />
        <input
          type="text"
          v-model="item.title"
          v-if="flag == index"
          @blur="flag = -1"
        />
        <span @dblclick="flag = index" v-else> {{ item.title }}</span>

        <button @click="remove(index)">删除</button>
      </li>
    </ul>
    <hr />
    已经完成：
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        v-show="item.status == true"
      >
        <input type="checkbox" v-model="item.status" />

        <input
          type="text"
          v-model="item.title"
          v-if="flag == index"
          @blur="flag = -1"
        />
        <span @dblclick="flag = index" v-else> {{ item.title }}</span>

        <button @click="remove(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: -1,
      list: [
        {
          title: "今天学会子组件和父子组件传值",
          status: false,
        },
        {
          title: "吃饭",
          status: false,
        },
        {
          title: "睡觉",
          status: true,
        },
        {
          title: "上钻石",
          status: false,
        },
      ],
      title: "",
    };
  },
  created() {
    if (localStorage.getItem("list")) {
      this.list = JSON.parse(localStorage.getItem("list"));
    }
  },
  //进入页面的时候从本地存储中拿存的数据
  methods: {
    add() {
      this.list.push({ title: this.title, status: false });
      this.title = "";
    },
    remove(index) {
      this.list.splice(index, 1);
    },
  },
  watch: {
    list: {
      handler(newval) {
        localStorage.setItem("list", JSON.stringify(newval));
      },
      deep: true,
    },
  },
  //本地存储数据保持不变
};
</script>
